<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSX 组件化声明和使用</title>
	</head>
	<body>
		<div id="app"></div>
		
		<script src="./js/react17.development.js"></script>
		<script src="./js/react-dom17.development.js"></script>
		<script src="./js/babel.min.js"></script>
		<script type="text/babel">
			
			// 1、函数式组件
			// 将JSX结构封装在函数中使用
			// 1.1 函数名称必须大写
			// 1.2 函数内部必须返回JSX结构
			let info = "函数式组件操作，是一种灵活的组件化方式"
			function Home() {
				return 	<div>
							<h2>函数式组件</h2>
							<p>描述: { info }</p>
						</div>
			}
			
			// 2. 类组件
			// 将JSX结构封装在类中的render()函数中
			// 2.1. 类名称首字母大写
			// 2.2. 类型中必须包含render()方法，方法中返回JSX结构
			// 2.3. 类组件，必须继承React.Component
			
			class ClsHome extends React.Component {
				
				// 声明类组件 状态数据
				state = {
					info: "类组件，是一种功能更加强大的、稳定的组件"
				}
				
				render() {
					return <div>
								<h2>类组件</h2>
								<p>描述: { this.state.info }</p>
							</div>
				}
			}
			
			// 添加jsx结构
			let div = 	<div>
							<h1>函数式组件</h1>
							<Home></Home>
							<hr/>
							<h1>类组件</h1>
							<ClsHome></ClsHome>
						</div>	
			
			// 渲染数据
			ReactDOM.render(div, document.querySelector("#app"))
			
		</script>
	</body>
</html>